import React, { Component } from 'react';
import { Skeleton, Switch, Card, Icon, Avatar, Row, Col } from 'antd';

const { Meta } = Card;
const mockdata = [
  {
    title: 'APP-ios',
    imgSrc: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
    desc: '我的第1个应用',
    status: '开发中',
    userNums: 1234,
  },
  {
    title: 's',
    imgSrc: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
    desc: '我的第2个应用',
    status: '开发中',
    userNums: 1234,
  },
  {
    title: '我的应用3',
    imgSrc: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    desc: '我的第3个应用',
    status: '开发中',
    userNums: 1234,
  },
  {
    title: '我的应用4',
    imgSrc: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
    desc: '我的第4个应用',
    status: '开发中',
    userNums: 1234,
  },
  {
    title: '我的应用5',
    imgSrc: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    desc: '我的第5个应用',
    status: '开发中',
    userNums: 1234,
  },
];
class ApplicationPage extends Component {
  state = {
    loading: true,
    applicationData: [],
  };
  componentDidMount() {
    this.initialCard();
  }
  initialCard = () => {
    this.setState({
      applicationData: mockdata,
    });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
    }, 1500);
  };

  render() {
    const { loading, applicationData } = this.state;
    return (
      <div>
        {' '}
        <Row gutter={24}>
          {applicationData.map(v => {
            return (
              <Col xs={24} sm={14} md={14} lg={8} xl={8} offset={-1}>
                <Card
                  style={{ marginTop: 16 }}
                  actions={[
                    <Icon type="setting" key="setting" />,
                    <Icon type="edit" key="edit" />,
                    <Icon type="ellipsis" key="ellipsis" />,
                  ]}
                >
                  <Skeleton loading={loading} avatar active>
                    <Meta
                      avatar={<Avatar src={v.imgSrc} />}
                      title={v.title}
                      description={
                        <Row gutter={24}>
                          <Col span={12}>
                            <p style={{ fontSize: '10px' }}>状态</p>{' '}
                            <p style={{ color: '#000' }}>{v.status}</p>
                          </Col>
                          <Col span={12}>
                            {' '}
                            <p style={{ fontSize: '10px' }}>用户数</p>{' '}
                            <p style={{ color: '#000' }}>{v.userNums}</p>
                          </Col>
                        </Row>
                      }
                    />
                  </Skeleton>
                </Card>
              </Col>
            );
          })}
        </Row>
      </div>
    );
  }
}
export default ApplicationPage;
